<template>
  <div id="jsmind_container"></div>
</template>

<script>
var selected = null;
var mind = null;
var efficiencyFlag = false;
var weightFlag = false;
export default {
  name: "MyJsmind",
  data() {
    return {
      // jsmind实例
      jsmind_instance: null,
      // 选中的节点
      selected_node: null,
      // jsmind数据
      jsmind_data: "",
    };
  },
  props: {
    isReadOnly: {
      type: Boolean,
    },
    isZ: {
      type: Boolean,
    }
  },
  destroyed() {
    document.removeEventListener("click", this.handleClick);
    document.removeEventListener("click", this.handleClickZ);
    document.removeEventListener("keyup", this.handleKeyup);
  },
  watch: {
    jsmind_data(newVal, oldVal) {
      if (oldVal !== "") {
        this.$emit("updateZbtxData", newVal);
      }
    },
  },
  methods: {
    // 样例
    editNode() {
      // 获取被选中的节点
      this.selected_node = this.jsmind_instance.get_selected_node();
      if (!selected_node) {
        alert("请选择一个节点");
        return;
      }
      selected_node.data.weight = this.weight;
      this.jsmind_instance.update_node(selected_node);
    },
    // 初始化
    initJm(data, efficiency, weight) {
      efficiencyFlag = efficiency;
      weightFlag = weight;
      // 先存一份
      this.jsmind_data = data;
      mind = {
        format: "node_tree",
        meta: {
          name: "jsMind-demo-tree",
          author: "com",
          version: "0.2",
        },
        /* 数据内容 */
        data: JSON.parse(data),
      };
      var options = {
        container: "jsmind_container",
        editable: true,
        theme: "primary",
        shortcut: {
          enable: this.isReadOnly ? false : true, // 是否启用快捷键
          handles: {}, // 命名的快捷键事件处理器
          mapping: this.isReadOnly
            ? {}
            : {
                // 快捷键映射
                addchild: [45, 4096 + 13], // <Insert>, <Ctrl> + <Enter>
                addbrother: 13, // <Enter>
                editnode: 113, // <F2>
                delnode: 46, // <Delete>
                toggle: 32, // <Space>
                left: 37, // <Left>
                up: 38, // <Up>
                right: 39, // <Right>
                down: 40, // <Down>
              },
        },
        view: {
          engine: "canvas",
          draggable: true, // 启用拖动画布功能
          hide_scrollbars_when_draggable: true, // 启用拖动时隐藏滚动条
        },
      };
      this.jsmind_instance = new jsMind(options);
      // 此处的flag是标志是否显示效能值
      this.jsmind_instance.show(mind, efficiencyFlag, weightFlag);
      let myimage = document.getElementById("jsmind_container");
      // 监听点击事件
      if (this.isZ) {
        document.addEventListener("click", this.handleClickZ);
      } else {
        document.addEventListener("click", this.handleClick);
      }
      if (!this.isReadOnly) {
        // 只有在指标体系构建引用时才监听键盘事件
        document.addEventListener("keyup", this.handleKeyup);
      }
      // 监听滚轮事件
      if (myimage.addEventListener) {
        //addEventListener适用于版本较新的IE浏览器 ，如IE9以及火狐浏览器，
        myimage.addEventListener("mousewheel", this.MouseWheelHandler, false);
        // Firefox浏览器使用的滚轮事件是 DOMMouseScroll
        myimage.addEventListener(
          "DOMMouseScroll",
          this.MouseWheelHandler,
          false
        );
      } else {
        myimage.attachEvent("onmousewheel", this.MouseWheelHandler);
      }
      // 渲染完成后默认选中根节点，展示根节点的节点权重等信息
      this.selected_node = this.jsmind_instance.get_root();
      this.jsmind_instance.select_node(this.selected_node);
      if (this.selected_node !== null) {
        this.$emit("endow", this.selected_node);
        // 判断是否为叶子节点
        this.isLeaf();
      }
    },
    // 更新思维导图数据
    updateJsMindData(data, flag = false) {
      this.jsmind_instance.show(
        { ...mind, data: data },
        efficiencyFlag,
        weightFlag
      );
      this.selected_node = !flag ? selected : this.jsmind_instance.get_root();
      this.jsmind_instance.select_node(this.selected_node);
      this.$emit("endow", this.selected_node);
      // 判断是否为叶子节点
      this.isLeaf();
    },
    // 点击事件
    handleClickZ(event) {
      this.selected_node = null;
      this.selected_node = this.jsmind_instance.get_selected_node();
      selected = this.selected_node;
      // 更新数据
      this.jsmind_data = JSON.stringify(this.jsmind_instance.get_data().data);
      // 判断点到了节点
      if (this.selected_node !== null) {
        this.$emit("endow", this.selected_node);
        // 判断是否为叶子节点
        this.isLeaf();
      }
    },
    // 点击事件
    handleClick(event) {
      if (!event.target.className.includes("selected")) {
        return;
      }
      this.selected_node = null;
      this.selected_node = this.jsmind_instance.get_selected_node();
      selected = this.selected_node;
      // 更新数据
      this.jsmind_data = JSON.stringify(this.jsmind_instance.get_data().data);
      // 判断点到了节点
      if (this.selected_node !== null) {
        this.$emit("endow", this.selected_node);
        // 判断是否为叶子节点
        this.isLeaf();
      }
    },
    // 键盘事件
    handleKeyup(event) {
      this.selected_node = null;
      this.selected_node = this.jsmind_instance.get_selected_node();
      selected = this.selected_node;
      // 判断切换到了节点
      if (this.selected_node !== null) {
        this.$emit("endow", this.selected_node);
        // 更新数据
        this.jsmind_data = JSON.stringify(this.jsmind_instance.get_data().data);
        // 判断是否为叶子节点
        this.isLeaf();
      }
    },
    // 判断是否切换到叶子节点父组件显示参数
    isLeaf() {
      this.showData = {
        weight: true,
        leaf: false,
      };
      if (this.selected_node.children.length === 0) {
        this.showData.leaf = true;
        this.$emit("showParameter", this.showData);
      } else {
        this.showData.leaf = false;
        this.$emit("showParameter", this.showData);
      }
    },
    // 鼠标滚轮事件
    MouseWheelHandler(event) {
      if (event.wheelDelta > 0) {
        // 向上滚动
        this.jsmind_instance.view.zoomIn();
      } else {
        // 向下滚动
        this.jsmind_instance.view.zoomOut();
      }
      event.preventDefault();
      event.stopPropagation();
    },
  },
};
</script>
<style>
#jsmind_container {
  width: 100%;
  height: 100%;
}
</style>
